<!--
 * @Author: your name
 * @Date: 2021-07-20 10:33:35
 * @LastEditTime: 2021-09-01 11:14:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\couponsCenter\couponCode\index.vue
-->
<template>
  <div
    class="source"
    v-loading="pageLoading"
    :element-loading-text="loadingText"
  >
    <div class="content">
      <v-notes>
        <div class="filterStyle">
          <el-form
            label-width="120px"
            :model="searchList"
            ref="searchForm"
            class="search-form"
            size="small"
          >
            <el-row class="search-row">
              <el-col :span="24">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="会员ID">
                      <el-input
                        placeholder="会员ID"
                        v-model="searchList.customerId"
                        @input="searchList.customerId=searchList.customerId.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                        clearable
                        v-on:keyup.enter.native="fetchList()"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="会员名称">
                      <el-input
                        placeholder="会员名称"
                        v-model="searchList.customerName"
                        @input="searchList.customerName=searchList.customerName.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                        clearable
                        v-on:keyup.enter.native="fetchList()"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="VIN">
                      <el-input
                        placeholder="VIN"
                        v-model="searchList.vin"
                        @input="searchList.vin=searchList.vin.replace(/[^\a-\z\A-\Z0-9\40\u4E00-\u9FA5]/g,'')"
                        clearable
                        v-on:keyup.enter.native="fetchList()"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-collapse-transition>
                  <div class="filterContent" v-if="showContent">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-form-item label="券池来源">
                          <el-select
                            v-model="searchList.source"
                            style="width: 95%"
                          >
                            <el-option
                              v-for="item in lookupItems.SOURCEOFCOUPONPOOL"
                              :key="item.id"
                              :label="item.dicName"
                              :value="item.dicCode"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="券池编号">
                          <el-input
                            placeholder="券池编号"
                            v-model="searchList.couponCode"
                            @input="searchList.couponCode=searchList.couponCode.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                            clearable
                            v-on:keyup.enter.native="fetchList()"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="券池名称">
                          <el-input
                            placeholder="券池名称"
                            v-model="searchList.couponName"
                            @input="searchList.couponName=searchList.couponName.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                            clearable
                            v-on:keyup.enter.native="fetchList()"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-form-item label="券码">
                          <el-input
                            placeholder="券码"
                            v-model="searchList.couponNo"
                            @input="searchList.couponNo=searchList.couponNo.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                            clearable
                            v-on:keyup.enter.native="fetchList()"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="服务商">
                          <el-input
                            placeholder="服务商"
                            v-model="searchList.serviceProviders"
                            @input="searchList.serviceProviders=searchList.serviceProviders.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                            clearable
                            v-on:keyup.enter.native="fetchList()"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="状态">
                          <el-select
                            v-model="searchList.status"
                            style="width: 95%"
                          >
                            <el-option
                              v-for="item in lookupItems.CUSTOMERCOUPONSTATE"
                              :key="item.id"
                              :label="item.dicName"
                              :value="item.dicCode"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-form-item label="冻结状态">
                          <el-select
                            v-model="searchList.frozenState"
                            style="width: 95%"
                          >
                            <el-option
                              v-for="item in lookupItems.FROZENSTATE"
                              :key="item.id"
                              :label="item.dicName"
                              :value="item.dicCode"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="发放时间">
                          <div class="block">
                            <el-date-picker
                              v-model="searchList.createTime"
                              type="daterange"
                              range-separator="至"
                              :picker-options="pickerOptions"
                              :default-value="[new Date(), new Date()]"
                              value-format="yyyy-MM-dd"
                              start-placeholder="开始时间"
                              end-placeholder="结束时间"
                            ></el-date-picker>
                          </div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse-transition>
              </el-col>
            </el-row>
            <el-row class="search-row">
              <el-col :span="12" :offset="12" style="text-align: right">
                <el-button
                  @click="closeFilter"
                  :icon="
                    showContent ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                  "
                  class="white-btn filterClose"
                  >{{ showContent ? '折叠' : '展开' }}</el-button
                >
                <el-button
                  @click="resetForm"
                  icon="el-icon-refresh-left"
                  class="white-btn"
                  >重置</el-button
                >
                <el-button
                  @click="fetchList(true)"
                  icon="el-icon-search"
                  class="dark-btn search-btn"
                  >搜索</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
      </v-notes>
      <div class="mb-lg">
        <v-table
          :data="tableData"
          ref="table"
          :listLoading="listLoading"
          :loadingText="loadingText"
          :paginationTotal="total"
          v-on:pageSizeChange="pageSizeChange"
          v-on:currentPageChange="currentPageChange"
          @handleSelectionChange="handleSelectionChange"
          border
          pagination
        >
          <div slot="header">
            <el-button
              @click="freeze('冻结')"
              :disabled="freezeAbled"
              class="dark-btn"
              v-if="$auth('ticketCenter:userTicketCodeManagement:freeze')"
            >
              冻结
            </el-button>
            <el-button
              @click="unfreeze('解冻')"
              :disabled="freezeAbled"
              class="dark-btn"
              v-if="$auth('ticketCenter:userTicketCodeManagement:thaw')"
            >
              解冻
            </el-button>
            <el-button
              @click="fillCoupon"
              class="search-btn"
              v-if="$auth('ticketCenter:userTicketCodeManagement:reissueTicket')"
            >
              补券
            </el-button>
          </div>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="会员ID"
            prop="customerId"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="会员名称"
            prop="customerName"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="会员手机号"
            align="center"
            prop="customerPhone"
            min-width="110"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="VIN"
            align="center"
            prop="vin"
            min-width="110"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="券池来源"
            prop="source"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('SOURCEOFCOUPONPOOL', scope.row.source) }}
            </template>
          </el-table-column>
          <el-table-column
            label="券池名称"
            prop="couponName"
            align="center"
            min-width="130"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="券池编号"
            align="center"
            prop="couponCode"
            min-width="110"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="券码"
            align="center"
            prop="couponNo"
            min-width="130"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            prop="status"
            min-width="110"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('CUSTOMERCOUPONSTATE', scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column
            label="冻结状态"
            align="center"
            prop="frozenState"
            min-width="110"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('FROZENSTATE', scope.row.frozenState) }}
            </template>
          </el-table-column>
          <el-table-column
            label="业务编号"
            align="center"
            prop="businessNo"
            min-width="110"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="服务商"
            align="center"
            prop="serviceProviders"
            min-width="110"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="发券形式"
            align="center"
            prop="fillCouponFlag"
            min-width="110"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('FILLCOUPONFLAG', scope.row.fillCouponFlag) }}
            </template>
          </el-table-column>
          <el-table-column
            label="发券时间"
            align="center"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.sendCouponTime | timestampToChange('time') }}
            </template>
          </el-table-column>
          <el-table-column
            label="使用时间"
            align="center"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.useTime | timestampToChange('time') }}
            </template>
          </el-table-column>
          <el-table-column
            label="有效期"
            align="center"
            min-width="180"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.beginUsePeriod | timestampToChange() }}<span v-if="scope.row.beginUsePeriod">至 </span>{{ scope.row.endUsePeriod | timestampToChange() }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="180" fixed="right">
            <template slot-scope="scope">
              <el-row type="flex" justify="space-around">
                <el-col :span="10"
                  v-if="$auth('ticketCenter:userTicketCodeManagement:editTicket')"
                >
                  <span class="colorLink" v-if="scope.row.isShowTicket" @click="showTicketEdit(scope.row)">
                券编辑
              </span>
                </el-col>
                <el-col :span="10"
                  v-if="$auth('ticketCenter:userTicketCodeManagement:history')"
                >
                  <span class="colorLink" @click="showHistory(scope.row)">
                历史记录
              </span>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </v-table>
      </div>
    </div>
    <!-- 券编辑 -->
    <el-dialog
      title="券编辑"
      :visible.sync="ticketEditDialog"
      width="50%"
      top="0"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      :before-close="handleClose"
      :element-loading-text="'加载中'"
      >
      <el-form :model="ticketEditData" ref="ticketEditData" :rules="rule"  label-width="100px">
        <el-form-item label="有效截至日期:" prop='endUsePeriod'>
          <el-date-picker
            v-model="ticketEditData.endUsePeriod"
            @change="ticketDataChangeEndUsePeriod"
            :picker-options="pickerOption"
            value-format="timestamp"
            type="date"
            placeholder="有效截至日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否冻结:" prop='frozenState'>
          <el-select
            @change="ticketDataChangeFrozenState"
            v-model="ticketEditData.frozenState"
          >
            <el-option
              v-for="item in lookupItems.FROZENSTATE"
              :key="item.id"
              :label="item.dicName"
              :value="item.dicCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="券状态:" prop='status'>
          <el-select
            @change="ticketDataChangeStatus"
            v-model="ticketEditData.status"
          >
            <el-option
              v-for="item in lookupItems.CUSTOMERCOUPONSTATE"
              :key="item.id"
              :label="item.dicName"
              :value="item.dicCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修改原因:" prop='changeReason'>
          <el-input type="textarea" maxlength="100" v-model="ticketEditData.changeReason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" class="white-btn">取消</el-button>
        <el-button @click="ticketEditSubmit" class="search-btn">确定</el-button>
      </span>
    </el-dialog>
    <!-- 历史记录 -->
    <el-dialog
      title="历史记录"
      :visible.sync="historyDialog"
      width="60%"
      top="0"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      destroy-on-close
      :before-close="historyClose">
      <el-table :data="historyData">
        <el-table-column
          label="序号"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="操作人"
          prop="operationName"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="操作内容"
          prop="operationContent"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="变更信息"
          prop="changedInfo"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="备注信息"
          prop="remark"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="操作时间"
          prop="updateTime"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.updateTime | timestampToChange('time') }}
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="historyClose" class="white-btn">取消</el-button>
      </span>
    </el-dialog>
    <!-- 冻结/解冻 -->
    <el-dialog
      :visible.sync="isFreezeDialog"
      :title="freezeTitle"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      :element-loading-text="'加载中'"
      width="35%"
      append-to-body
      top="10px"
    >
      <div style="text-align: center; padding: 20px 0"> {{ freezeContent }} </div>
      <div class="freeze-footer">
        <el-button class="search-btn" @click="freezeSubmit(freezeTitle)">确 定</el-button>
        <el-button @click="isFreezeDialog = false" v-if="freezeShowBtn" style="margin-left: 20px"
          >取 消</el-button
        >
      </div>
    </el-dialog>
    <!-- 补券 -->
    <el-dialog
      title="补券"
      :visible.sync="fillCouponDialog"
      width="60%"
      top="0"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      :before-close="fillCouponClose"
    >
      <el-form
        :model="fillCouponFormData"
        :rules="rules"
        ref="fillCouponFormData"
        label-width="110px"
        size="small"
        class="updateForm"
      >
        <el-form-item label="会员ID" prop="customerId">
          <el-input
            v-model="fillCouponFormData.customerId"
            placeholder="会员ID"
          ></el-input>
        </el-form-item>
        <el-form-item label="会员名称" prop="customerName">
          <el-input
            v-model="fillCouponFormData.customerName"
            placeholder="会员名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          @click="addCoupon"
          class="search-btn"
        >
          添加券池
        </el-button>
        <el-button
          @click="cancelCoupon"
          class="search-btn"
        >
          取消券池
        </el-button>
      </div>
      <el-table
        :data="fillCouponData"
        @selection-change="fillCouponSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          label="券池编号"
          prop="couponCode"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="券池名称"
          prop="couponName"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="面值"
          prop="faceValue"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="有效期类型"
          prop="periodType"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ getDictionaryNameByCode('PERIODTYPE', scope.row.periodType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="使用有效期"
          prop="periodDay"
          align="center"
          min-width="180"
          :show-overflow-tooltip="true"
        >
            <template slot-scope="scope">
              <div v-if="scope.row.periodType === '1'">
                {{ scope.row.beginUsePeriod | timestampToChange() }}<span v-if="scope.row.beginUsePeriod">至</span> {{ scope.row.endUsePeriod | timestampToChange() }}
              </div>
              <div v-else>
                {{ scope.row.periodDay }}天
              </div>
            </template>
        </el-table-column>
        <el-table-column
          label="补券数量"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-input
              type="number"
              v-model="scope.row.actualRefundAmountDialog"
              size="mini"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button class="search-btn" @click="fillCouponSubmit">确 定</el-button>
        <el-button @click="fillCouponClose" class="white-btn">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 添加券池 -->
    <el-dialog
      title="添加券池"
      :visible.sync="addCouponDialog"
      width="80%"
      top="0"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      :before-close="addCouponClose"
    >
    <div class="content">
      <v-notes>
        <div class="filterStyle">
          <el-form
            label-width="120px"
            :model="addCouponList"
            ref="addCouponList"
            class="search-form"
            size="small"
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="券池编号" prop="couponCode">
                  <el-input
                    placeholder="券池编号"
                    v-model="addCouponList.couponCode"
                    @input="addCouponList.couponCode=addCouponList.couponCode.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                    clearable
                    v-on:keyup.enter.native="fetchList()"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="券池名称" prop="couponName">
                  <el-input
                    placeholder="券池名称"
                    v-model="addCouponList.couponName"
                    @input="addCouponList.couponName=addCouponList.couponName.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                    clearable
                    v-on:keyup.enter.native="fetchList()"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="券池来源" prop="source">
                  <el-select
                    v-model="addCouponList.source"
                    style="width: 95%"
                  >
                    <el-option
                      v-for="item in lookupItems.SOURCEOFCOUPONPOOL"
                      :key="item.id"
                      :label="item.dicName"
                      :value="item.dicCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="业务类型" prop="businessType">
                  <el-select
                    v-model="addCouponList.businessType"
                    style="width: 95%"
                  >
                    <el-option
                      v-for="item in lookupItems.BUSINESSTYPE"
                      :key="item.id"
                      :label="item.dicName"
                      :value="item.dicCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="服务商" prop="serviceProvidersName">
                  <el-input
                    placeholder="服务商"
                    v-model="addCouponList.serviceProvidersName"
                    @input="addCouponList.serviceProvidersName=addCouponList.serviceProvidersName.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                    clearable
                    v-on:keyup.enter.native="fetchList()"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间" prop="createTime">
                  <div class="block">
                    <el-date-picker
                      v-model="addCouponList.createTime"
                      type="daterange"
                      range-separator="至"
                      :picker-options="pickerOptions"
                      :default-value="[new Date(), new Date()]"
                      value-format="yyyy-MM-dd"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="search-row">
              <el-col :span="12" :offset="12" style="text-align: right">
                <el-button
                  @click="resetCoupon"
                  icon="el-icon-refresh-left"
                  class="white-btn"
                  >重置</el-button
                >
                <el-button
                  @click="addCoupon(true)"
                  icon="el-icon-search"
                  class="dark-btn search-btn"
                  >搜索</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
      </v-notes>
      <div class="mb-lg">
        <v-table
          :data="addCouponData"
          ref="table"
          :listLoading="listLoading"
          :loadingText="loadingText"
          :paginationTotal="addCouponTotal"
          :header="false"
          v-on:pageSizeChange="addCouponSizeChange"
          v-on:currentPageChange="addCouponPageChange"
          @handleSelectionChange="addCouponSelectionChange"
          border
          pagination
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="券池编号"
            prop="couponCode"
            align="center"
            min-width="140"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="券池名称"
            prop="couponName"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="券池来源"
            prop="source"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('SOURCEOFCOUPONPOOL', scope.row.source) }}
            </template>
          </el-table-column>
          <el-table-column
            label="业务类型"
            align="center"
            prop="businessType"
            min-width="110"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('BUSINESSTYPE', scope.row.businessType) }}
            </template>
          </el-table-column>
          <el-table-column
            label="券面值"
            prop="faceValue"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="服务商"
            prop="serviceProvidersName"
            align="center"
            min-width="130"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="有效期类型"
            align="center"
            prop="periodType"
            min-width="110"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('PERIODTYPE', scope.row.periodType) }}
            </template>
          </el-table-column>
          <el-table-column
            label="使用有效期"
            align="center"
            prop="invoiceStatus"
            min-width="180"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.periodType === '1'">
                {{ scope.row.beginUsePeriod | timestampToChange() }}<span v-if="scope.row.beginUsePeriod">至</span> {{ scope.row.endUsePeriod | timestampToChange() }}
              </div>
              <div v-else>
                {{ scope.row.periodDay || '' }}<span v-if="scope.row.periodDay">天</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            min-width="160"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime | timestampToChange('time') }}
            </template>
          </el-table-column>
        </v-table>
        <span slot="footer" class="dialog-footer" style="float:right; margin-top: 10px;">
          <el-button class="search-btn" @click="addCouponSubmit">提 交</el-button>
          <el-button @click="addCouponClose" class="white-btn">关 闭</el-button>
        </span>
      </div>
    </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import VNotes from '@/components/Notes/index'
import VTable from '@/components/PageTable/index'
import { common } from '@/mixins/common'
import { getCouponList, freezeStatus, updateCouponSubmit, getHistoryData, getAddCouponData, onFillCoupon } from '@/api/coupons'

export default {
  name: 'couponCode',
  components: {
    VTable,
    VNotes
  },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  data () {
    return {
      loadingText: '加载中...',
      pageLoading: false,
      ticketEditDialog: false,
      historyDialog: false,
      isFreezeDialog: false,
      timeChanged: false,
      fillCouponDialog: false,
      addCouponDialog: false,
      isShowfillCoupon: true,
      freezeAbled: true,
      ticketEditData: {
        ticketEndUsePeriod: '',
        ticketFrozenState: '',
        ticketStatus: '',
        changeReason: ''
      },
      addCouponList: {
        couponCode: '',
        couponName: '',
        source: '',
        businessType: '',
        serviceProvidersName: '',
        createTime: []
      },
      fillCouponFormData: {
        customerId: '',
        customerName: ''
      },
      historyData: [],
      frozenIdList: [],
      deleteIdList: [],
      fillCouponData: [],
      fillCouponParamsData: [],
      fillCouponIndexList: [],
      idsList: [],
      selectionList: [],
      fillCouponSelectionList: [],
      addCouponSelectionList: [],
      addCouponData: [],
      paramsFrozenState: '',
      freezeTitle: '',
      freezeContent: '',
      rule: {
        changeReason: [
          { required: false, message: '请填写修改原因', trigger: 'blur' }
        ]
      },
      rules: {
        customerId: [
          { required: true, message: '请填写会员ID', trigger: 'blur' }
        ],
        customerName: [
          { required: true, message: '请填写会员名称', trigger: 'blur' }
        ]
      },
      searchList: {
        createTime: [],
        displayStart: '0',
        displayLength: '10',
        customerId: '',
        customerName: '',
        vin: '',
        source: '',
        couponCode: '',
        couponName: '',
        couponNo: '',
        status: '',
        frozenState: '',
        serviceProviders: ''

      },
      timeData: {
        createTimeStart: '',
        createTimeEnd: '',
        updateTimeStart: '',
        updateTimeEnd: ''
      },
      tableData: [],
      total: 0,
      addCouponTotal: 0,
      pageSize: 10,
      addCouponPageSize: 10,
      currentPage: 0,
      addCouponCurrentPage: 0,
      listLoading: false,
      showContent: false,
      isShowfillConfirm: true,
      freezeShowBtn: true,
      pickerOptions: {
        disabledDate (time) {
          // 如果没有后面的-8.64e7就是不可以选择今天的
          return time.getTime() > Date.now() // - 8.64e7
        }
      },
      pickerOption: {
        disabledDate: this.disabledDate
      }
    }
  },
  created () {
    this.fetchList()
  },
  methods: {
    disabledDate (time) {
      const beginUsePeriod = this.ticketEditData.beginUsePeriod
      if (beginUsePeriod) {
        return time.getTime() <= beginUsePeriod - 86399000
      } else {
        return false
      }
    },
    resetForm () {
      this.searchList = {
        createTime: [],
        updateTime: [],
        displayStart: '0',
        displayLength: '10',
        customerMobile: '',
        customerName: '',
        dispatchNo: '',
        orderNo: '',
        status: '',
        subOrderNo: '',
        supplierCode: ''
      }
      this.timeData = {}
      this.currentPage = 0
      this.$refs.table.restPage()
      this.fetchList()
    },
    resetCoupon () {
      this.addCouponCurrentPage = 0
      this.$refs.addCouponList.resetFields()
      this.addCoupon()
    },

    handleSelectionChange (val) {
      this.frozenIdList = []
      this.selectionList = val
      this.selectionList.forEach(e => {
        this.frozenIdList.push(e.id)
      })
      if (this.selectionList.length > 0) {
        this.freezeAbled = false
      } else {
        this.freezeAbled = true
      }
    },

    // 关闭券编辑
    handleClose () {
      this.ticketEditDialog = false
      this.rule.changeReason[0].required = false
      // this.$refs.ticketEditData.resetFields()
    },

    // 关闭补券
    fillCouponClose () {
      this.fillCouponData = []
      this.fillCouponDialog = false
      this.$refs.fillCouponFormData.resetFields()
    },
    // 关闭添加券池
    addCouponClose () {
      this.addCouponDialog = false
      this.$refs.addCouponList.resetFields()
    },

    // 关闭历史记录
    historyClose () {
      this.historyDialog = false
    },

    // 历史记录按钮
    showHistory (row) {
      this.historyDialog = true
      this.listLoading = true
      getHistoryData(row.id).then((res) => {
        this.listLoading = false
        if (res) {
          if (Number(res.code) === 1) {
            this.historyData = res.obj
          } else {
            this.$confirm(res.code, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
        this.isFreezeDialog = false
      })
    },

    // 券编辑按钮
    showTicketEdit (row) {
      this.ticketEditData = JSON.parse(JSON.stringify(row))
      this.ticketEditDialog = true
      this.ticketEditData.ticketEndUsePeriod = row.endUsePeriod
      this.ticketEditData.ticketFrozenState = row.frozenState
      this.ticketEditData.ticketStatus = row.status
    },

    // 有效截至日期change事件
    ticketDataChangeEndUsePeriod (val) {
      if (this.ticketEditData.ticketEndUsePeriod !== val) {
        this.timeChanged = true
      } else {
        this.timeChanged = false
      }
      if (this.ticketEditData.ticketEndUsePeriod !== val + 86399000) {
        this.rule.changeReason[0].required = true
      } else {
        this.rule.changeReason[0].required = false
        this.$refs.ticketEditData.clearValidate()
      }
    },
    ticketDataChangeFrozenState (val) {
      if (this.ticketEditData.ticketFrozenState !== val) {
        this.rule.changeReason[0].required = true
      } else {
        this.rule.changeReason[0].required = false
        this.$refs.ticketEditData.clearValidate()
      }
    },
    ticketDataChangeStatus (val) {
      if (this.ticketEditData.ticketStatus !== val) {
        this.rule.changeReason[0].required = true
      } else {
        this.rule.changeReason[0].required = false
        this.$refs.ticketEditData.clearValidate()
      }
    },

    // 获取列表数据
    fetchList (type) {
      if (!this.$auth('ticketCenter:userTicketCodeManagement:list')) {
        this.$alert('您没有对应权限')
        return false
      }
      if (type) {
        this.$refs.table.restPage()
        this.currentPage = 0
      }
      this.listLoading = true
      const params = {
        ...this.searchList,
        startBindDate: this.searchList.createTime ? new Date(this.searchList.createTime[0] + ' ' + '00:00:00').getTime() : '',
        endBindDate: this.searchList.createTime ? new Date(this.searchList.createTime[1] + ' ' + '23:59:59').getTime() : '',
        displayLength: this.pageSize,
        displayStart: this.currentPage
      }
      getCouponList(params).then((res) => {
        this.listLoading = false
        if (res) {
          if (Number(res.code) === 1) {
            const obj = res.obj
            this.tableData = obj.data || []
            this.total = obj.total
            this.tableData.forEach(e => {
              if (e.source === '1' && e.status !== '2') {
                e.isShowTicket = true
              }
            })
          } else {
            this.$confirm(res.code, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
      })
    },
    closeFilter () {
      this.showContent = !this.showContent
    },

    // 冻结按钮
    freeze (e) {
      this.freezeShowBtn = true
      if (this.selectionList.some(e => {
        return e.frozenState === '2' || e.status === '2'
      })) {
        this.freezeShowBtn = false
        this.freezeContent = '所选券码中包含冻结或已使用，请重新选择'
      } else {
        this.freezeContent = '是否冻结所选券码'
      }
      this.freezeTitle = e
      this.isFreezeDialog = true
    },

    // 解冻按钮
    unfreeze (e) {
      this.freezeShowBtn = true
      if (this.selectionList.some(e => {
        return e.frozenState === '1' || e.status === '2'
      })) {
        this.freezeShowBtn = false
        this.freezeContent = '所选券码中包含正常或已使用，请重新选择'
      } else {
        this.freezeContent = '是否解冻所选券码'
      }
      this.freezeTitle = e
      this.isFreezeDialog = true
    },

    // 补券按钮
    fillCoupon () {
      this.fillCouponDialog = true
    },
    // 添加券池按钮
    addCoupon (type) {
      this.idsList = []
      this.fillCouponData.forEach(e => {
        this.idsList.push(e.id)
      })
      if (type) {
        this.addCouponCurrentPage = 0
      }
      this.addCouponDialog = true
      this.listLoading = true
      if (this.fillCouponData.length >= 10) {
        this.addCouponCurrentPage = parseInt(this.fillCouponData.length / 10)
      }
      const params = {
        ...this.addCouponList,
        frozenState: '1',
        status: '2',
        createTimeStart: this.addCouponList.createTime ? new Date(this.addCouponList.createTime[0] + ' ' + '00:00:00').getTime() : '',
        createTimeEnd: this.addCouponList.createTime ? new Date(this.addCouponList.createTime[1] + ' ' + '23:59:59').getTime() : '',
        displayLength: this.addCouponPageSize,
        displayStart: this.addCouponCurrentPage,
        ids: this.idsList
      }
      getAddCouponData(params).then((res) => {
        this.listLoading = false
        if (res) {
          if (Number(res.code) === 1) {
            const obj = res.obj
            this.addCouponData = obj.data || []
            // this.addCouponData.forEach(e => {
            //   this.fillCouponData.forEach(data => {
            //     if (data.id === e.id) {
            //       var index = this.addCouponData.findIndex(a => {
            //         return a.id === e.id
            //       })
            //       for (let i = this.fillCouponData.length - 1; i >= 0; i--) {
            //         this.addCouponData.splice(index, 1)
            //       }
            //     }
            //   })
            // })
            this.addCouponTotal = obj.total
          } else {
            this.$confirm(res.code, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
        this.isFreezeDialog = false
        this.listLoading = false
      })
    },

    tableRowClassName (row) {
      row.row.rowIndex = row.rowIndex
    },

    // 取消券池按钮
    cancelCoupon () {
      for (let index = this.fillCouponIndexList.length - 1; index >= 0; index--) {
        this.fillCouponData.splice(this.fillCouponIndexList[index], 1)
      }
    },

    // 冻结/解冻确定
    freezeSubmit (type) {
      if (!this.freezeShowBtn) {
        this.isFreezeDialog = false
        return false
      }
      if (type === '冻结') {
        this.paramsFrozenState = '2'
      } else {
        this.paramsFrozenState = '1'
      }
      this.listLoading = true
      const params = {
        frozenState: this.paramsFrozenState,
        frozenIdList: this.frozenIdList
      }
      freezeStatus(params).then((res) => {
        this.listLoading = false
        if (res) {
          if (Number(res.code) === 1) {
            this.$confirm(type + '成功', {
              confirmButtonText: '确定',
              showCancelButton: false
            })
            this.fetchList()
          } else {
            this.$confirm(res.code, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
        this.isFreezeDialog = false
      })
    },

    // 补券确定
    fillCouponSubmit () {
      this.isShowfillConfirm = true
      this.fillCouponParamsData = []
      this.fillCouponData.forEach(e => {
        this.fillCouponParamsData.push(
          {
            customerId: this.fillCouponFormData.customerId,
            customerName: this.fillCouponFormData.customerName,
            customerPhone: '',
            couponId: e.id,
            number: e.actualRefundAmountDialog
          }
        )
        if (!e.actualRefundAmountDialog) {
          this.isShowfillConfirm = false
        }
      })
      if (this.fillCouponData.length === 0) {
        this.$confirm('请至少添加一条券池', {
          confirmButtonText: '确定',
          showCancelButton: false
        })
      } else {
        if (this.isShowfillConfirm === false) {
          this.$confirm('您有未填写补券数量', {
            confirmButtonText: '确定',
            showCancelButton: false
          })
        } else {
          this.$refs.fillCouponFormData.validate((valid) => {
            if (valid) {
              onFillCoupon(this.fillCouponParamsData).then((res) => {
                this.listLoading = false
                if (res) {
                  if (Number(res.code) === 1) {
                    this.$confirm('成功', {
                      confirmButtonText: '确定',
                      showCancelButton: false
                    })
                      .then(() => {
                        this.fillCouponDialog = false
                        this.fillCouponData = []
                        this.$refs.fillCouponFormData.resetFields()
                        this.fetchList()
                      })
                  } else {
                    this.$confirm(res.code, {
                      confirmButtonText: '确定',
                      showCancelButton: false
                    })
                  }
                }
                this.isFreezeDialog = false
              })
            }
          })
        }
      }
    },

    fillCouponSelectionChange (val) {
      this.fillCouponIndexList = []
      this.fillCouponParamsData = []
      this.fillCouponSelectionList = val
      this.fillCouponSelectionList.forEach(e => {
        this.fillCouponIndexList.push(e.rowIndex)
        this.fillCouponParamsData.push(
          {
            customerPhone: '',
            couponId: e.id,
            number: e.actualRefundAmountDialog
          }
        )
      })
      if (this.fillCouponSelectionList.length > 0) {
        this.isShowfillCoupon = false
      } else {
        this.isShowfillCoupon = true
      }
    },
    addCouponSelectionChange (val) {
      this.addCouponSelectionList = val
    },

    // 添加券池提交
    addCouponSubmit () {
      this.$refs.addCouponList.resetFields()
      this.addCouponSelectionList.forEach(e => {
        this.fillCouponData.push(e)
      })
      this.addCouponDialog = false
    },

    // 券编辑确定
    ticketEditSubmit () {
      const params = {
        id: this.ticketEditData.id,
        frozenState: this.ticketEditData.frozenState,
        status: this.ticketEditData.status,
        endUsePeriod: this.timeChanged ? this.ticketEditData.endUsePeriod + 24 * 60 * 60 * 1000 - 1000 : this.ticketEditData.endUsePeriod,
        remark: this.ticketEditData.changeReason
      }
      if (this.rule.changeReason[0].required === false) {
        this.$confirm('当前页面未做任何修改', {
          confirmButtonText: '确定',
          showCancelButton: false
        })
      } else {
        this.$refs.ticketEditData.validate((valid) => {
          if (valid) {
            this.listLoading = true
            updateCouponSubmit(params).then((res) => {
              this.listLoading = false
              if (res) {
                if (Number(res.code) === 1) {
                  this.$confirm('修改成功', {
                    confirmButtonText: '确定',
                    showCancelButton: false
                  })
                    .then(() => {
                      this.ticketEditDialog = false
                      this.fetchList()
                    })
                    .catch(() => {})
                } else if (Number(res.code) === 0) {
                  this.$confirm('当前页面未做任何修改', {
                    confirmButtonText: '确定',
                    showCancelButton: false
                  })
                } else {
                  this.$confirm(res.code, {
                    confirmButtonText: '确定',
                    showCancelButton: false
                  })
                }
              }
              this.isFreezeDialog = false
              this.rule.changeReason[0].required = false
            })
          }
        })
      }
    },

    // 每页数据数目改变
    pageSizeChange (size) {
      this.pageSize = size
      this.fetchList()
    },
    addCouponSizeChange (size) {
      this.addCouponPageSize = size
      this.addCoupon()
    },
    // 当前页改变
    currentPageChange (curPage) {
      this.currentPage = curPage - 1
      this.fetchList()
    },
    addCouponPageChange (curPage) {
      this.addCouponCurrentPage = curPage - 1
      this.addCoupon()
    }
  }
}
</script>
<style lang="scss" scoped>
.freeze-footer {
  float: right;
  margin-top: 10px;
}
/deep/ .el-textarea__inner{
  min-height: 76px !important;
}
</style>
